<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .box {
        height: 500px;
        text-align: center;
        /* 所有子孙节点（inline或者inline-block）都受到影响 */
    }

    .box img {
        height: 100%;
    }

    .btn {
        padding: 2px 4px;
    }

    .loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #eee;
        text-align: center;
        padding-top: 300px;
        font-size: 20px
    }
</style>

<body>
    <div class="box">
        <img src="" alt="pic">
        <div class="bar">
            <!-- data-controller自定义属性，可以使用$().data()获取,As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. -->
            <button class="btn pre" data-controller="prev">前一张</button>
            <button class="btn after" data-controller="after">后一张</button>
        </div>
    </div>
    <!-- <div class="loading">
        <p class="percent">0%</p>
    </div> -->
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="./preLoad.js"></script>
    <script>
        // Image：这里使用的这个Image对象，其实是一个浏览器api，用来创建一个图片元素：document.createElement('img').

        (function () {

            var pics = [
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512113458649&di=6c76acb91044fead0ab3e635d51fc292&imgtype=0&src=http%3A%2F%2Fa3.topitme.com%2Ff%2F6c%2F9e%2F11286774792509e6cfo.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512112954192&di=a5d13cdd07c103a2f778e5ceaad915ce&imgtype=0&src=http%3A%2F%2Fdl.bizhi.sogou.com%2Fimages%2F2015%2F05%2F13%2F1171772.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512112954191&di=8708b7cf0dc78863b851a00e3e789bc5&imgtype=0&src=http%3A%2F%2Fu.thsi.cn%2Ffileupload%2Fdata%2FInput%2F2015%2Ff55a032c4272e8a60fcd9925ca1b171a.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512708313&di=81a1a642a7eea6f339f308a036bce91a&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b2c1570dda596ac7251f058bdb2b.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512149093800&di=bc87a80c67b862f74148c2bc2983c513&imgtype=0&src=http%3A%2F%2Fimages6.fanpop.com%2Fimage%2Fphotos%2F38300000%2F-Black-Widow-the-avengers-38357186-2560-1600.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512149093800&di=051ed3e734640585875a22fc0935a51d&imgtype=0&src=http%3A%2F%2Fimage.tmdb.org%2Ft%2Fp%2Foriginal%2FenkQRpdhnvHEnO66j4UJ9szrUtS.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512149093800&di=fdb83a54b94964fa9be2c943041eaef0&imgtype=0&src=http%3A%2F%2Faskpanda.cc%2Fask%2Fpics%2Fstar%2Fmovie%2F9617%2F9617-dm782016052755138.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512152653952&di=ce66fffa3d7767e4e5d2aa12fcc6002e&imgtype=0&src=http%3A%2F%2Fp6.qhimg.com%2Ft01a42df3118b666d65.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512747411&di=76dbe769dc315f19b3f1772be01083c7&imgtype=jpg&er=1&src=http%3A%2F%2Fimage14.m1905.cn%2Fuploadfile%2F2015%2F0416%2F20150416014544586740.jpg"
            ];

            function PicDisplay(el, pics) {
                this.$el = $(el);
                this.$btns = this.$el.find(".btn");
                this.$img = this.$el.find("img");
                this.picIndex = 0;
                this.pics = pics;
            }
            PicDisplay.prototype.bindEvent = function () {
                var self = this;
                this.$btns.on("click", function () {
                    if ($(this).data("controller") === "prev") {
                        self.picIndex = Math.max(0, --self.picIndex);
                    } else {
                        self.picIndex = Math.min(self.pics.length - 1, ++self.picIndex);
                    }
                    self.$img.attr("src", self.pics[self.picIndex]);
                });
            };
            PicDisplay.prototype.init = function () {
                this.$img.attr("src", this.pics[this.picIndex]);
                this.bindEvent();
            };

            function init(el, pics) {
                $loading = $(".loading");

                $.preLoadPic(pics, {
                    mode: "orderedLoad",
                    each: function (count, total) {
                        $loading.find("p").html(Math.round(count / total * 100) + "%");
                    },
                    all: function () {
                        $loading.hide();
                    }
                })

                new PicDisplay(el, pics).init();

            };

            $.fn.extend({
                picDisplay: function (pics) {
                    return $(this).each(function () {
                        init(this, pics);
                    })
                }
            })

            $(".box").picDisplay(pics);

        })();
    </script>
</body>

</html>